.ss-steps
  ss-display-flex()
  counter-reset: num;
  &.column
    flex-flow: column
    >.item
      margin-left: 0
      align-items: flex-start
    .item-line
      &:after
        width: 2px
        height: 100%
        position: absolute
        left: calc(32px / 2)
      &:last-child
        flex: initial
        &:after
          display: none
        
  &.item-column
    >.item
      flex-flow: column
      margin-left: 0
  >.item
    ss-display-flex(row, flex-start, center)
    margin-left: 20px
    position: relative
    &:before
      content: counter(num)
      counter-increment: num
      border: 1px solid
      background: #fff
      width: 32px
      height: 32px
      border-radius: @width
      font-size: 20px
      ss-display-flex(row,center, center)
      margin-right: 10px
      position: relative
      z-index 2
    &.finish
      &:before
        content: '\e605'
        color: $color-primary 
        border-color: @color
    &.active
      &:before
        background: $color-primary 
        color: #fff
    &:not(:last-child)
      flex: 1
    &:last-child
      .item-line
        flex: initial
        &:after
          display: none
    &:first-child
      margin-left: 0
  .item-line
    flex: 1
    ss-display-flex(row nowrap, flex-start, center)
    &:after
      content: ''
      flex: 1
      height: 2px
      background: #000
